<template>
  <div>
    <div class="moveControlWrap" ref="moveControlWrap">
      <div class="pageTableInner">
        <div class="infoSearchWrap">
          <div class="infoSearchOne">
            <el-row :gutter="20">
              <el-col :span="7">
                <div class="searchWrap">
                  <span class="searchFont">行政区域:</span>
                  <span class="searchInputFont" style="width: 38%;">
                  <el-select v-model="searchInfo.district" :disabled="$store.state.userInfo.regionId?true:false"
                             @change="changeDistrict(searchInfo.district)" size="mini"
                             clearable placeholder="行政区">
                    <el-option
                      v-for="item in $store.state.districtData"
                      :key="item.id"
                      :label="item.regionName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </span>
                  <span class="searchInputFont" style="width: 38%;">
                    <el-select v-model="searchInfo.street" @change="checkstreet" size="mini" clearable placeholder="街道">
                      <el-option
                        v-for="item in streetData"
                        :key="item.id"
                        :label="item.regionName"
                        :value="item.id">
                      </el-option>
                    </el-select>
                 </span>
                </div>
              </el-col>
              <el-col :span="14">
                <div class="searchWrap">
                  <span class="searchFont">区域类型:</span>
                  <span class="searchInputFont">
                   <el-radio-group size="mini" v-model="searchInfo.areaType" @change="getMapInfo()">
                    <el-radio-button v-for="(item,index) in typeList" :key="index"
                                     :label="item.value">{{item.label}}</el-radio-button>
                  </el-radio-group>
                </span>
                </div>
              </el-col>

              <!--<div style="float: right;margin-right: 10px;">
                <el-button type="primary" size="mini" @click="getMapInfo()">查询</el-button>
              </div>-->
            </el-row>
          </div>
        </div>
        <!--<div class="mapContentWrap">
          <mapRack   v-show="searchInfo.areaType!=5"
                     :areaInfo="areaInfo"
                     :colorslist="colorslist"
                     :district="searchInfo.district"
                     ref="mapFun"
                     @getMapInfo="getMapInfo"
          ></mapRack>
          <zombiemap  v-show="searchInfo.areaType==5" ref="zombiemap"></zombiemap>
        </div>-->
        <div style="height: 100%;">
          <div class="tableWrapLeft">
            <div class="rightInfoWrap">
              <div class="rightInfoheader">
                <el-row>
                  <el-col :span="6">
                    <el-select @change="selectCaseScroll" v-model="searchInfoScroll.alarmType" size="mini"
                               placeholder="类型">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="6">
                    <div>
                      <el-select @change="selectCaseScroll" v-model="searchInfoScroll.enterpriseNo" size="mini"
                                 placeholder="企业">
                        <el-option
                          styel="width:100%;"
                          v-for="item in companyInfos"
                          :key="item.enterpriseNo+''"
                          :label="item.enterpriseName"
                          :value="item.enterpriseNo+''">
                        </el-option>
                      </el-select>
                    </div>

                  </el-col>
                  <el-col :span="6">
                    <el-select @change="selectCaseScroll" v-model="searchInfoScroll.districtId" size="mini"
                               placeholder="行政区">
                      <el-option
                        v-for="item in districtData"
                        :key="item.id"
                        :label="item.regionName"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-col>
                  <!-- 
                  <el-col :span="6">
                    <div style="text-align: center;line-height: 35px;font-size: 12px;">
                      区域名称
                    </div>
                  </el-col>
                  -->
                  <el-col :span="6">
                    <el-select @change="selectCaseScroll" v-model="searchInfoScroll.pushStatus" size="mini"
                               placeholder="类型">
                      <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </div>
              <vue-seamless-scroll :data="prizeList" :class-option="optionSingleHeight" class="seamless-warp">
                <el-row v-for="(item,index) in prizeList" :key="index" class="hoverSty" style="cursor: pointer;">
                  <el-col :span="6">
                    <div class="textSwipe">
                      &nbsp;{{item.alarmType == 0 ? "违规投放" : item.alarmType == 1 ? "区域超量" : item.alarmType == 2 ? "乱停乱放" : ""}}
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="textSwipe">
                      &nbsp;{{item.enterpriseName}}
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="textSwipe">
                      &nbsp;{{item.districtName}}
                    </div>
                  </el-col>
                  <!--
                  <el-col :span="6">
                    <div class="textSwipe">
                      &nbsp;{{item.areaName}}
                    </div>
                  </el-col>
                  -->
                  <el-col :span="6">
                    <div class="textSwipe">
                      &nbsp;{{item.pushStatus == 0 ? "未立案" : item.pushStatus == 1 ? "已立案" : ""}}
                    </div>
                  </el-col>
                </el-row>
              </vue-seamless-scroll>
            </div>
          </div>
          <div class="mapRight">
            <img src="./img/towardsLeft.png" v-show="tableShow" alt="" @click="changeWidth" class="navImgStyle">
            <img src="./img/towardsRight.png" v-show="!tableShow" alt="" @click="changeWidth" class="navImgStyle">
            <mapRack v-show="searchInfo.areaType!=5"
                     :areaInfo="areaInfo"
                     :colorslist="colorslist"
                     :district="searchInfo.district"
                     ref="mapFun"
                     @getMapInfo="getMapInfo"
            ></mapRack>
            <zombiemap v-show="searchInfo.areaType==5" ref="zombiemap"></zombiemap>

          </div>


        </div>

      </div>
    </div>
  </div>

</template>

<script>
  import mapRack from "./map/mapRack.vue"
  import zombiemap from "./map/zombiemap.vue"
  export default {
    props: [],
    data(){
      return {
        searchInfo: {
          areaType: "",
          district: this.$store.state.userInfo.regionId,
          street: "",
          areaStatus: 0,
        },
        streetData: [],
        typeList: [
          {label: "区域", value: ""},
          {label: "禁停区", value: "1"},
          {label: "规范停放区", value: "2"},
          {label: "动态调节区", value: "3"},
          {label: "临时监控区", value: "4"},
          {label: "违投车辆分布", value: "5"},],
        colorslist: [
          {
            color: '#FF5656',
            label: '禁停区',
            areaType: 1,
            count: '0'
          }, {
            color: '#567AFF',
            label: '规范停放区',
            areaType: 2,
            count: '0'
          }, {
            color: '#FF9600',
            label: '动态调节区',
            areaType: 3,
            count: '0'
          }, {
            color: '#00B2ED',
            label: '临时监控区',
            areaType: 4,
            count: '0'
          }],
        areaInfo: [[], [], [], [], []],

        isFirt: true,
        //scroll
        searchInfoScroll: {
          alarmType: "",
          districtId: "",
          enterpriseNo: "",
          pushStatus: "",
        },
        districtData: [
          {"id": "", "regionName": "行政区", "cityId": 1, "provinceId": 1}
        ],
        options: [
          {
            value: '',
            label: '类型'
          },
          {
            value: '0',
            label: '违规投放'
          }, {
            value: '2',
            label: '违规停放'
          }, {
            value: '1',
            label: '区域超量'
          }],
        tableShow: true,
        companyInfos: [{enterpriseNo: '', enterpriseName: "企业"}],
        options1: [
          {
            value: '',
            label: '类型'
          },
          {
            value: '0',
            label: '未立案'
          }, {
            value: '1',
            label: '已推送'
          },],
        options2: [
          {
            value: '',
            label: '全部'
          },
          {
            value: '1',
            label: '乱停乱放'
          }, {
            value: '2',
            label: '损坏车辆'
          }, {
            value: '4',
            label: '违规投放'
          }, {
            value: '5',
            label: '区域超量'
          }, {
            value: '3',
            label: '其它'
          }],
        prizeList: [{
          alarmType: "",
          districtId: "",
          enterpriseNo: "",
          pushStatus: "",
        },],

      }
    },
    components: {
      mapRack,
      zombiemap
    },
    created(){
      setTimeout(() => {
        if (this.$store.state.userInfo.regionId) {this.changeDistrict(this.searchInfo.district)}
      }, 500)
    },
    destroyed(){

    },
    mounted(){
      this.getMapInfo()
      //scroll
      document.querySelector(".rightInfoWrap").style.height = document.querySelector(".moveControlWrap").clientHeight - 88 + "px"
      document.querySelector(".mapRight").style.height = document.querySelector(".moveControlWrap").clientHeight - 98 + "px"
      this.$store.state.companyInfos.forEach(item => {
        this.companyInfos.push(item)
      })
      this.$store.state.districtData.forEach(item => {
        this.districtData.push(item)
      })
      setTimeout(() => {
        this.selectCaseScroll()
      }, 500)
    },
    computed: {
      optionSingleHeight () {
        return {
          step: 0.2, // 数值越大速度滚动越快
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          waitTime: 0 // 单步运动停止的时间(默认值1000ms)
          /* limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
           hoverStop: true, // 是否开启鼠标悬停stop
           direction: 0, // 0向下 1向上 2向左 3向右
           openWatch: true, // 开启数据实时监控刷新dom
           singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
           singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
           waitTime: 1000 // 单步运动停止的时间(默认值1000ms)*/
        }
      }
    },
    methods: {
      changeWidth(){
        if (this.tableShow) {
          document.querySelector(".tableWrapLeft").style.width = "0"
          document.querySelector(".mapRight").style.width = "100%"
        } else {
          document.querySelector(".tableWrapLeft").style.width = "30%"
          document.querySelector(".mapRight").style.width = "70%"
        }
        this.tableShow = !this.tableShow
      },
      selectCaseScroll(){
        this.axios.post(process.env.API_HOST + '/vehicle/selectAlarmScroll', this.searchInfoScroll)
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.prizeList = result.result
            }
          })
      },
      //     获取数据
      getMapInfo(){
        if (this.searchInfo.areaType == 5) {  //僵尸车辆分布
          if (this.$refs.zombiemap.district != this.searchInfo.district || this.$refs.zombiemap.street != this.searchInfo.street) {
            this.$refs.zombiemap.district = this.searchInfo.district
            this.$refs.zombiemap.street = this.searchInfo.street
            this.$refs.zombiemap.changeRadio()
          } else if (this.isFirt) {
            this.isFirt = false
            this.$refs.zombiemap.changeRadio()
          }
        } else {
          this.selectGovAreaMap()
        }
      },
      //改变行政区 获取街道
      changeDistrict(district){
        this.getMapInfo()
        this.searchInfo.street = ""
        if (!district) {
          this.streetData = []
          return
        }
        this.axios.post(process.env.API_HOST + '/common/selectRegion', {parentId: district})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.streetData = result.result
            }
          })

        //定到区域
        this.$store.state.districtData.forEach(item => {
          if (item.id == district && item.regionPoints) {
            setTimeout(() => {
              if (this.searchInfo.areaType == 5) {
                this.$refs.zombiemap.getBoundary(JSON.parse(item.regionPoints))
              } else {
                this.$refs.mapFun.getBoundary(JSON.parse(item.regionPoints))
              }
            }, 100)

          }
        })
      },
      //改变街道
      checkstreet(){
        this.getMapInfo()
        if (!this.searchInfo.street) {
          this.changeDistrict(this.searchInfo.district)
        }
        this.streetData.forEach(item => {
          if (item.id == this.searchInfo.street && item.regionPoints) {
            setTimeout(() => {
              if (this.searchInfo.areaType == 5) {
                this.$refs.zombiemap.getBoundary(JSON.parse(item.regionPoints))
              } else {
                this.$refs.mapFun.getBoundary(JSON.parse(item.regionPoints))
              }
            }, 100)

          }
        })
      },
      selectGovAreaMap(){
        this.axios.post(process.env.API_HOST + `/vehicle/selectMonitorList`, this.searchInfo)
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.areaInfo = [[], [], [], []]
              if (result.result.length > 0) {
                result.result.forEach((item) => {
                  this.areaInfo[item.areaType - 1].push({
                    ...item,
                    areaPoints: item.areaPoints ? JSON.parse(item.areaPoints) : []
                  })
                })
              }
              this.colorslist.forEach(item => {
                item.count = this.areaInfo[item.areaType - 1].length
              })
            }
          })
      },
    }
  }
</script>


<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .moveControlWrap
    page()
    .tableWrapLeft
      width: 30%;
      float: left;
      border-radius: 5px;
      transition width 0.5s
    .mapRight
      width: 70%;
      display: inline-block;
      transition width 0.5s
      position relative
    .navImgStyle
      position: absolute;left: 15px;top: 50%;z-index: 10;cursor: pointer;
    .mapContentWrap
      position absolute;
      left 0px;
      right 0px
      bottom 0px
      top 78px
      box-sizing: border-box;
      border-radius: 5px;
      background-color: white;
    .rightInfoWrap
      margin-right 10px
      overflow hidden
      border-bottom 10px solid white
      background-color: white;
      height: 100%;
      border-radius: 5px;
      position relative
      input:
      :-webkit-input-placeholder { /* WebKit browsers */
        color: white;
      }
      input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: white;
      }
      input:
      :-moz-placeholder { /* Mozilla Firefox 19+ */
        color: white;
      }
      input:-ms-input-placeholder { /* Internet Explorer 10+ */
        color: white;
      }

      .rightInfoheader
        box-shadow: 0px 7px 13px 0px rgba(13, 13, 14, 0.15);
        background-color: #3975FE;
        border-radius: 5px;
        height: 35px;
        line-height: 35px;
        color: white;
        font-weight: bold;
        font-size: 14px;
        position absolute;
        left 0;
        top 0;
        right 0;
        z-index 10
        box-sizing border-box
        .el-input__suffix-inner
          display none
        .el-input--mini .el-input__inner
          background-color #3975FE
          color white
          border none
          padding 0 5px !important;
          text-align center !important
      .textSwipe
        text-align: center;
        line-height: 20px;
        color: #898A8A;
        font-size: 12px;
        padding: 14px 0;
      .hoverSty:hover .textSwipe
        color #3975FE

</style>
